<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>商铺管理<small>分类详情</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商铺管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box" >
            <div >
                <el-form :inline="true" :model="searchCategory" class="demo-form-inline">
                    <el-form-item label="分类描述">
                        <el-input v-model="searchCategory.description" placeholder="分类描述"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker
                                value-format="yyyy-MM-dd"
                                v-model="searchCategory.createDateStart"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                        至
                        <el-date-picker
                                v-model="searchCategory.createDateEnd"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item lable="分类下数量">
                        <el-input v-model="searchCategory.goodsCount" placeholder="请输入数量"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button  icon="el-icon-search" @click="search">查询</el-button>
                    </el-form-item>
                    <el-button type="primary" icon="el-icon-circle-plus" @click="showNewForm">新建</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="deleteByIds">删除</el-button>
                </el-form>


                <!--新建弹出框-->
                <el-dialog :title="newCategory.id == undefined ? '新建分类':'修改分类'" :visible.sync="dialogFormVisible">
                    <el-form :model="newCategory">
                        <el-form-item label="分类名称" :label-width="formLabelWidth">
                            <el-input v-model="newCategory.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="分类描述" :label-width="formLabelWidth">
                            <el-input v-model="newCategory.description" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="分类位置" :label-width="formLabelWidth">
                            <el-select v-model="newCategory.level" placeholder="请选择排在那个分类后面">
                                <el-option  label="放在最前面" :value="0"></el-option>
                                <el-option v-for="item in tableData" :label="item.name" :value="item.level"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save">确 定</el-button>
                    </div>
                </el-dialog>









                <template >
                    <el-table
                            ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%;"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                label="序号"
                                type="index">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="商品名称"
                                width="120">
                        </el-table-column>

                        </el-table-column>
                        <el-table-column
                                prop="intro"
                                label="商品简介"
                                width="400">
                        </el-table-column>
                        <el-table-column
                                prop="createDate"
                                label="创建时间"
                                width="150">
                        </el-table-column>

                        <el-table-column
                                prop="updateDate"
                                label="更新时间"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="enabledValue"
                                label="启用"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="categoryName"
                                label="所属分类名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="120">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle @click="updateCategory(scope.row)" type="text" size="small"></el-button>
                                <el-button type="text" size="small" >编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
        </div>
    </div>

    {{ids}}

</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',

        data:{
            dialogFormVisible:false,
            ids:[],//删除的id集合
            multipleSelection:[],
            searchCategory:{description:"",createDateStart:"",createDateEnd:"",goodsCount:""},
            tableData: [{
                id:"1",
                name: '冰镇饮料',
                updateDate: '2019-12-12',
                enabled: '1',
                enabledValue:"是"
            }, {
                id:"1",
                name: '冰镇饮料',
                image: '../img/avatar3.png',
                updateDate: '2019-12-12',
                enabled: '1',
                enabledValue:"是"
            }, {
                id:"1",
                name: '冰镇饮料',
                image: '../img/avatar3.png',
                updateDate: '2019-12-12',
                enabled: '1',
                enabledValue:"是"
            }, {
                id:"1",
                name: '冰镇饮料',
                image: '../img/avatar3.png',
                updateDate: '2019-12-12',
                enabled: '1',
                enabledValue:"是"
            }],
            newCategory: {
            },
            formLabelWidth: '120px'

        },
        created: function () {//在vue初始化时调用
            this.findAll()
        },
        methods:{

            search(){

                axios.post("/category/search",this.searchCategory).then(
                    res=>{
                        if (res.data.flag == true){
                            this.$message.success(res.data.message)
                            this.tableData = res.data.data;
                        } else {
                            this.$message.error(res.data.message)
                        }


                    }
                )


            },


            updateCategory(category){
                var stringify = JSON.stringify(category);
                this.newCategory = JSON.parse(stringify);
                alert(this.newCategory.id)
                this.dialogFormVisible = true;
            },


            showNewForm(){
                this.newCategory ={level:0};
                this.dialogFormVisible = true;
            },

            open() {
                this.$confirm('此操作将永久删除这些分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {

                    axios.post("/category/delete",this.ids).then(
                        res=>{
                            if (res.data.flag == true){
                                this.findAll()
                            }
                            this.$message.success(res.data.message)
                        }
                    )


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //删除
            deleteByIds(){
                if (this.ids.length == 0){
                    this.$message.error("请至少选择一项")
                    return;
                }

                this.open();


            },








            handleSelectionChange(val) {
                this.ids = [];

                for (let i = 0; i < val.length; i++) {
                    this.ids.push(val[i].id);
                }

            },

            //获取优先级

            getLevel() {
                axios.get("/category/getLevel").then(res=>{

                    if (res.data.flag == true){
                        this.levelCount = res.data.data + 1;
                    }

                });


            },

            //保存
            save(){



                if (this.newCategory.id != undefined){

                    axios.post("/category/update",this.newCategory).then(

                        res=>{
                            this.dialogFormVisible = false;
                            if (res.data.flag == true){
                                this.$message.success(res.data.message);
                                this.findAll();
                            } else {
                                this.$message.error(res.data.message);
                            }

                        }
                    )


                }else {
                    axios.post("/category/save",this.newCategory).then(res=>{
                        this.dialogFormVisible = false;
                        if (res.data.flag == true){
                            this.$message.success(res.data.message);
                            this.findAll();
                        } else {
                            this.$message.error(res.data.message);
                        }

                    })
                }





            },




            findAll(){
                axios.get("/goods").then(
                    res=>{
                        if (res.data.flag == true){
                            this.tableData = res.data.data;
                        }else{
                            this.$message.error(res.data.message);
                        }
                    }
                )

            }



        }
    })
</script>
</html>